<template>
  <div class="mobile_box" style="margin-top: -50px; !important;">
    <div class="mobile_banner_img">
      <swiper ref="mySwiper" :options="swiperOption2">
        <swiper-slide v-for="(item, index) in imgArr1" :key="index">
          <img :src="item.url" alt="" />
          <router-link v-if="item.router != ''" :to="{ name: item.router }"
            >了解更多</router-link
          >
          <!-- <a :href="item.a"
             v-else>了解更多</a> -->
        </swiper-slide>
      </swiper>
    </div>

    <div class="New_index_notwo_box">
      <div class="New_index_notwo">
        <div v-for="(item, index) in NewNotwo" :key="index">
          <img :src="item.icon" alt="" />
          <div>{{ item.data }}</div>
          <div>{{ item.title }}</div>
        </div>
      </div>
    </div>

    <div class="mobile_about_box">
      <!-- <div class="mobile_big_title">中天网络</div> -->
      <div class="mobile_about_box_title">集平台开发、网络营销于一体</div>
      <div class="mobile_about_box_centent">
        小程序开发、公众平台开发、同城小程序开发
      </div>
      <div class="mobile_about_box_title mobile_bold">解决方案</div>
      <div class="mobile_about_box_img">
        <!-- <router-link :to="{name:'xiaochengxu'}">
          <img src="http://o6wndwjxn.qnssl.com/a1d3f20180831155024387.png"
               alt="" />
          <div>小程序</div>
          <img src="http://o6wndwjxn.qnssl.com/186a1201808311550351600.png"
               alt="" />
        </router-link>
        <router-link :to="{name:'gzhkf'}">
          <img src="http://o6wndwjxn.qnssl.com/fa6ca201808311550305076.png"
               alt="" />
          <div>公众开发</div>
          <img src="http://o6wndwjxn.qnssl.com/186a1201808311550351600.png"
               alt="" />
        </router-link> -->
      </div>
    </div>

    <div class="mobile_five_box">
      <div class="mobile_small_title">营销推广</div>
      <div>
        <div v-for="(item, index) in sArr" :key="index" class="five_small_box">
          <img :src="item.url" alt="" />
          <div>{{ item.name }}</div>
          <!-- <router-link v-if="index!==2 && index != 3 && index != 5 && index != 6"
                       :to="{name:item.rout,params:{height:item.height}}">
            <el-button type="text"
                       class="button"
                       style="color: #aaaaaa">查看详情>></el-button>
          </router-link> -->
          <el-button
            v-if="index === 2"
            type="text"
            class="button"
            style="color: #aaaaaa"
            ><a
              href="http://jiameng.ztwl1111.com"
              style="color: #aaaaaa;text-decoration: none"
              >查看详情>></a
            ></el-button
          >
          <el-button
            v-if="index === 3"
            type="text"
            class="button"
            style="color: #aaaaaa"
            ><a
              href="http://hrb.weiyouquan.com.cn"
              style="color: #aaaaaa;text-decoration: none"
              >查看详情>></a
            ></el-button
          >
          <el-button
            v-if="index === 5"
            type="text"
            class="button"
            style="color: #aaaaaa"
            ><a
              href="http://a.scene.eqh5.cn/s/GO1IKi57?&share_level=1&from_user=371c4885-382f-4b92-8af9-52c618705e7a&from_id=bb31d253-18f9-4bad-bdbe-d804a8be562d&share_time=1537338985003"
              style="color: #aaaaaa;text-decoration: none"
              >查看详情>></a
            ></el-button
          >
          <el-button
            v-if="index === 6"
            type="text"
            class="button"
            style="color: #aaaaaa"
            ><a
              href="javascript:;"
              style="color: #aaaaaa;text-decoration: none"
              @click="video()"
              >查看详情>></a
            ></el-button
          >
        </div>
      </div>
    </div>

    <!-- 服务领域 -->
    <div class="Mobile_index_field">
      <img
        src="http://o6wndwjxn.qnssl.com/50143201809071613272174.png"
        alt=""
      />
      <div>
        <div class="mobile_small_title color_white">服务领域</div>
        <div class="Mobile_field_box">
          <div
            v-for="(item, index) in fuwuArr"
            :key="index"
            class="Mobile_field_name"
          >
            <div
              v-if="index % 2 == 0"
              class="Mobile_field_name_top"
              :class="item.show ? 'actives' : ''"
              @click="Mobilefield(index)"
            >
              {{ item.name }}
            </div>
            <div
              v-else
              class="Mobile_field_name_fot"
              :class="item.show ? 'actives' : ''"
              @click="Mobilefield(index)"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
        <div class="Mobile_field_img">
          <div v-for="(item, index) in fuwuArr" v-show="item.show" :key="index">
            <img :src="item.img1" alt="" />
            <img :src="item.img2" alt="" />
            <img :src="item.img3" alt="" />
            <img :src="item.img4" alt="" />
          </div>
        </div>
      </div>
    </div>

    <!-- 应用功能 -->
    <div class="Mobile_index_function">
      <div class="Mobile_function_title">小程序应用功能</div>
      <div class="Mobile_function_content">
        智能小程序一键生成，多种应用场景内容丰富，各种功能组合，即用即可生成。
      </div>
      <div class="Mobile_function_index">
        <div
          v-for="(item, index) in MobileFunction"
          :key="index"
          class="Mobile_function_item"
        >
          <div
            v-for="(items, i) in item"
            :key="i"
            @click="Mobilefunctionclick(index, i)"
          >
            <img :src="items.image" alt="" />
            <div>{{ items.titel }}</div>
          </div>
        </div>
      </div>
    </div>
    <div
      v-show="Mobilefunction"
      class="Mobile_function_mobal"
      @click="Mobilefunctionclose()"
    >
      <div>
        <div>{{ Mobilefunctiontitle }}</div>
        <div>{{ Mobilefunctioncontent }}</div>
      </div>
    </div>

    <div v-show="mobvideo" class="New_video" @click="video()">
      <img
        src="http://o6wndwjxn.qnssl.com/b528a201809201534102972.jpg"
        alt=""
      />
    </div>

    <!-- 我们的辐射范围 -->
    <div class="Mobile_index_map">
      <div>我们的辐射范围</div>
      <div>全国20000+城市站长覆盖99%的城市</div>
      <img
        src="http://o6wndwjxn.qnssl.com/519b0201810091326519493.png"
        alt=""
      />
    </div>

    <!-- 合伙人 -->
    <div class="Mobile_index_Partner">
      <img
        src="http://o6wndwjxn.qnssl.com/ed84f201809071633507365.png"
        alt=""
      />
      <div>
        <!-- <div>行业先锋大洗牌，中天全国合伙人招募。</div> -->
        <a href="tel:4000385581">合作咨询</a>
      </div>
    </div>

    <!-- 企业优势 -->
    <div class="mobile_sev_box">
      <div class="mobile_small_title">企业优势</div>
      <div class="mobile_sev_shipei">
        <div>
          <div>
            <div class="sev_small_box">
              <img
                src="http://o6wndwjxn.qnssl.com/7bacf201808111543397459.png"
                alt=""
              />
              <div>产品定制化</div>
              <div>
                为客户提供专业化的定制服务，并为客户量身定制高转化、多趣味、强互动的小程序及营销策略。
              </div>
            </div>
          </div>
          <div>
            <div class="sev_small_box">
              <img
                src="http://o6wndwjxn.qnssl.com/c44fc201808111554174253.png"
                alt=""
              />
              <div>团队优质化</div>
              <div>
                拥有专业的技术开发团队， 资深广告团队，包括策略制
                定、社会化营销等服务。
              </div>
            </div>
          </div>
        </div>
        <div>
          <div>
            <div class="sev_small_box">
              <img
                src="http://o6wndwjxn.qnssl.com/31618201808111552219747.png"
                alt=""
              />
              <div>资源海量化</div>
              <div>
                拥有海量广告资源，覆盖90%互联网用户，对接众多优质互联网资源与平台。
              </div>
            </div>
          </div>
          <div>
            <div class="sev_small_box">
              <img
                src="http://o6wndwjxn.qnssl.com/016ec201808111555308956.png"
                alt=""
              />
              <div>服务闭环化</div>
              <div>
                根据客户情况提供技术开发 到营销推广整体闭环方案，
                形成闭环服务体系。
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 全国商户 -->
    <div class="Mobile_index_Time">
      <img
        src="http://o6wndwjxn.qnssl.com/6570f201809071633588350.png"
        alt="img"
      />
      <div>
        <div>
          为全国 <span> {{ NewNumber }} </span> 商户
        </div>
        <div>提供365X24小时优质服务</div>
      </div>
    </div>
    <!-- 合作品牌 -->
    <div class="Mobile_index_case">
      <div>合作品牌</div>
      <div class="Mobile_case_index">
        <div
          v-for="(item, index) in NewCooperation"
          :key="index"
          class="Mobile_case_item"
        >
          <div v-for="(itemS, i) in item" :key="i">
            <img :src="itemS.image" alt="" />
          </div>
        </div>
      </div>
    </div>

    <!--改-->

    <div class="mobile_qiyezixun_box">
      <div class="mobile_qiyezixun_title">
        <div>企业动态</div>
        <div>
          <!-- <router-link :to="{name:'wenzhang'}">了解更多&gt;&gt;</router-link> -->
        </div>
      </div>
      <div v-for="(item, index) in qiye" :key="index">
        <div class="mobile_qiyezixun_content" @click="chakan1(item.article_id)">
          <div>{{ item.title }}</div>
          <div>{{ item.create_at }}</div>
        </div>
      </div>
    </div>
    <div class="mobile_qiyezixun_box">
      <div class="mobile_qiyezixun_title">
        <div>行业资讯</div>
        <div>
          <!-- <router-link :to="{name:'zixun'}">了解更多&gt;&gt;</router-link> -->
        </div>
      </div>
      <div v-for="(item, index) in zixun" :key="index">
        <div class="mobile_qiyezixun_content" @click="chakan2(item.article_id)">
          <div>{{ item.title }}</div>
          <div>{{ item.create_at }}</div>
        </div>
      </div>
    </div>

    <!--改-->
  </div>
</template>

<script>
import axios from "axios";
import { indexMobileData } from "./js/mobileData";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
  name: "Index",
  components: {
    swiper,
    swiperSlide
  },
  props: {
    equipment: {
      type: String,
      default: "pc"
    }
  },
  data() {
    return {
      hei: "",
      mobvideo: false,
      rTime: 0.001,
      qiye: [],
      zixun: [],
      currentDate: new Date(),
      dialogVisible: false,
      NewNumber: 1000000,
      Mobilefunctiontitle: "",
      Mobilefunctioncontent: "",
      Mobilefunction: false,
      New_notwo: indexMobileData.NewNotwo,
      fuwuArr: indexMobileData.fuwuArr,
      imgArr1: indexMobileData.imgArr1,
      imgArr: indexMobileData.imgArr,
      anliArr: indexMobileData.anliArr,
      sArr: indexMobileData.sArr,
      MobileFunction: indexMobileData.MobileFunction,
      New_cooperation: indexMobileData.NewCooperation,
      swiperOption1: {
        notNextTick: true,

        autoplay: true,
        loop: true,
        grabCursor: true,
        setWrapperSize: true,
        autoHeight: true,
        pagination: ".swiper-pagination",
        paginationClickable: true,
        navigation: {
          nextEl: ".swiper_one_next",
          prevEl: ".swiper_one_prev"
        },
        mousewheelControl: true,
        observeParents: true,
        slidesPerView: 2,

        debugger: true
      },
      swiperOption2: {
        notNextTick: true,

        autoplay: true,
        loop: true,

        grabCursor: true,
        setWrapperSize: true,
        autoHeight: true,
        pagination: ".swiper-pagination",
        paginationClickable: true,
        navigation: {
          nextEl: ".swiper_one_next",
          prevEl: ".swiper_one_prev"
        },
        mousewheelControl: true,
        observeParents: true,
        slidesPerView: 1,

        debugger: true
      }
    };
  },
  mounted() {
    axios
      .get("http://infoapi.ztwlxx.net/index/index/lista?cate=1&pageshow=2")
      .then(res => {
        this.qiye = res.data.data.list;
      });
    axios
      .get("http://infoapi.ztwlxx.net/index/index/lista?cate=2&pageshow=4")
      .then(res => {
        this.zixun = res.data.data.list;
      });
    this.hei = this.$route.params.height1;

    if (this.hei === 5500) {
      this.send(this.hei);
    }
    this.NewNumberF();
  },
  methods: {
    chakan1(index) {
      axios
        .get(
          "http://infoapi.ztwlxx.net/index/index/detaila?article_id=" + index
        )
        .then(res => {
          // this.wenzhang.push(res.data.data);
          if (res.data.code === 200) {
            this.$router.push({
              path: "/wenzhang",
              name: "wenzhang",
              params: {
                wenzhang: res.data.data
              }
            });
          }
        });
    },
    video() {
      this.mobvideo = !this.mobvideo;
    },
    chakan2(index) {
      axios
        .get(
          "http://infoapi.ztwlxx.net/index/index/detaila?article_id=" + index
        )
        .then(res => {
          // this.wenzhang.push(res.data.data);
          if (res.data.code === 200) {
            this.$router.push({
              path: "/zixun",
              name: "zixun",
              params: {
                wenzhang: res.data.data
              }
            });
          }
        });
    },
    send(aa) {
      let that = this;
      let rTime = that.rTime;
      let interval = window.setInterval(() => {
        if (--that.rTime <= 0) {
          that.rTime = rTime;
          window.scrollTo(0, aa);
          window.clearInterval(interval);
        }
      }, 1);
    },
    gengguo() {
      this.$router.push({
        path: "/zixun",
        name: "zixun"
      });
    },
    chakan() {
      // axios.get('http://infoapi.ztwlxx.com/index/index/lista?cate=1&pageshow=10').then(res=>{
      // this.qiye=res.data.data.list;
      this.$router.push({
        path: "/wenzhang",
        name: "wenzhang"
        // params:{
        //   qiye:res.data.data.list
        // }
      });
      // });
    },
    ztwlkf() {
      this.dialogVisible = true;
    },
    handleClose(done) {
      done();
    },
    qiehuan(index) {
      for (let i = 0; i < this.fuwuArr.length; i++) {
        if (i !== index) {
          this.fuwuArr[i].show = false;
        } else {
          this.fuwuArr[i].show = true;
        }
      }
    },
    Mobilefield(e) {
      for (var i = 0; i < this.fuwuArr.length; i++) {
        this.fuwuArr[i].show = false;
        this.fuwuArr[e].show = true;
      }
    },
    NewNumberF() {
      var that = this;
      var dsq = setInterval(function() {
        if (that.NewNumber < 3000000) {
          that.NewNumber += 4321;
          if (that.NewNumber > 3000000) {
            that.NewNumber = 3000000;
          }
        } else {
          clearInterval(dsq);
        }
      }, 1);
    },
    Mobilefunctionclick(e, ev) {
      var con = this.MobileFunction[e][ev];
      this.Mobilefunctiontitle = con.titel;
      this.Mobilefunctioncontent = con.content;
      this.Mobilefunction = true;
    },
    Mobilefunctionclose() {
      this.Mobilefunction = false;
    }
  }
};
</script>
<style
  lang="css"
  src="../../../../assets/scss/website/mobile_index.css"
  scoped
></style>
